<template>
  <div class="merchantManagement">
    <div class="merchantManagement-header">
      <div class="search-inp">
        <div class="item">
          <span class="item-text">店铺名称</span>
          <input
            type="text"
            v-model="merchantName"
            placeholder="请输入店铺名称"
          />
        </div>
        <div class="item">
          <span class="item-text">店铺编码</span>
          <input
            type="text"
            v-model="merchantNo"
            placeholder="请输入店铺编码"
          />
        </div>
        <div class="item">
          <span class="item-text">负责人</span>
          <input type="text" v-model="leader" placeholder="请输入姓名" />
        </div>
        <div class="item">
          <span class="item-text">合同状态</span>
          <el-select v-model="searchvalue1" placeholder="请选择">
            <el-option
              v-for="item in searchoptions1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="item">
          <div class="search-btn">
            <span class="my-btn" :class="colorBlue == 0 ?'my-back-blue':''"
             @click="searchClick" @mousemove="mouseMove(0)">筛选</span>
            <span class="my-btn" :class="colorBlue == 1?'my-back-blue':''" 
             @click="emptyClick" @mousemove="mouseMove(1)">清空</span>
            <span class="my-btn" :class="colorBlue == 2?'my-back-blue':''" 
             @click="addMerchant" @mousemove="mouseMove(2)">添加商家</span>
          </div>
        </div>
      </div>
    </div>
    <div class="table">
      <el-table :data="arr" stripe border style="width: 100%">
        <el-table-column prop="shopName" label="店铺名称"></el-table-column>
        <el-table-column
          prop="shopCode"
          label="店铺编码"
        ></el-table-column>
        <el-table-column
          prop="chargePersonName"
          label="负责人"
        ></el-table-column>
        <el-table-column
          prop="chargePersonPhone"
          label="联系电话"
        ></el-table-column>
        <el-table-column
          label="合同状态"
        >
        <template slot-scope="scope">
          <span>{{scope.row.contractState==0?'无效':'有效'}}</span>
        </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
        ></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text">查看</el-button>
            <el-button @click="edit(scope.row)" type="text">编辑</el-button>
             <!-- @click="disable(scope.row)" -->
            <el-button  type="text">
               <span @click="Stop(scope.row) ">
                 <span v-if="scope.row.state==1">禁用</span>
                 <span v-if="scope.row.state==0">启用</span>
               </span>
             
             </el-button>
            <el-button @click="deleter(scope.row)" type="text">删除</el-button>
            <!-- <el-button  type="text" @click="delete(scope.row.shopId)" >删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
    </el-pagination>
     <!-- <div class="mask" v-show="masknum">
            <div class="contenta">
                <p class="content-top">
                    <span>启停用</span>
                </p>
                <ul class="content-items">
                    <li class="item">
                        您确定要禁用突突到家吗？禁用后，商家将不可在登录商户后台
                    </li>
                    
                  
                </ul>
                <div class="content-bottom">
                    <el-button type="primary" @click="determine">确定</el-button>
                    <el-button type="warning"  @click="cancelClick">取消</el-button>
                </div>
            </div>
      </div> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      colorBlue:0,
      masknum:false,
      merchantName:'',
      merchantsData:'',
      merchantNo:'',
      leader:'',
      mentdee:'',
      shopId:'',
      page: 1,
      pageSize: 5,
      total:0,
      currentPage:1,
      row:'',
      searchvalue1: "", //合同状态
      searchoptions1: [
        //合同状态
        { label: "有效", value: "1" },
        { label: "无效", value: "0" },
      ],
      arr: [],
    };
  },
  mounted() {
    this.loadShopList();
  },
  methods: {
    mouseMove(index) {
      this.colorBlue = index;
    },
    // 查看
    handleClick(row){
      this.$router.push({
        path:'/index/seeMerchant/',
        query:{shopId:row.shopId},

      })
  },
    //编辑
    edit(row){
       this.$router.push({
        path:'/index/editMerchant',
        query:{shopId:row.shopId}
      })
    },
    //启停用
    disable(row){
      this.masknum=true
      this.row=row
      console.log(this.row,'555555555555555555555')
      

    },
    //取消
    cancelClick(){
       this.masknum=false
    },
    // determine(){//禁用传0
    //   var param={
    //       shopId:this.row.shopId,
    //       state:0
    //   }
    //   this.axios({
    //       url:'/shop/start',
    //       method:'post',
    //       data:JSON.stringify(param),
    //   }).then(res=>{
    //        this.masknum=false
    //       // history.go(0);
    //       // this.merchantsData=res.data.data
    //       // this.radioValue=res.data.data.contractState.toString()
    //   })
    // },
    //分页
     handleSizeChange(val) {
          this.pageSize = val;
          this.loadShopList();
        },
     handleCurrentChange(val) {//分页
          this.page = val;
          this.loadShopList();
        },
    //删除
    deleter(row){
      var param = {
        shopId: row.shopId
      };
      this.$confirm('此操作将永久删除该商家, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      })
      this.axios({
        url: "/shop/delete",
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
        console.log(res)
         this.loadShopList();
      });  
    },
    Stop(row){//状态:0停用
       var com=0;
       if(row.state==0){
         com=1;
       }else{
          com=0;
       }
        const param={
            shopId:row.shopId,
            state:com
        }  
       if(com==0){
           	this.$confirm('您确定要禁用突突到家吗？禁用后，商家将不可在登录商户后台', "警告", {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type:'warning'
				}).then(()=>{
          this.axios({
              url:'/shop/start',
              method:'post',
              data:JSON.stringify(param),
          }).then(response => {
            if(response.data.code==""){
                    this.$message({ type: "success", message: "禁用成功!",});
                    this.loadShopList();
            }else{
                  this.$message({ type: "success", message: "禁用失败！！",});
            }
                });
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消更改',
					})
				})
       }else if(com==1){
          this.axios({
              url:'/shop/start',
              method:'post',
              data:JSON.stringify(param),
          }).then(response => {
            if(response.data.code==""){
                    this.$message({ type: "success", message: "启用成功!",});
                    this.loadShopList();
            }else{
                  this.$message({ type: "success", message: "启用失败！！",});
            }
                });
       }
			
       },
    
    // 添加商家按钮
    addMerchant() {
      this.$router.push("/index/addMerchant")
    },
    // 清空
    emptyClick() {
      this.merchantName = ""
      this.merchantNo = ""
      this.leader = ""
      this.searchvalue1 = ""
      this.loadShopList()
    },
    //筛选
    searchClick() {
      this.loadShopList();
      // this.emptyClick();
    },
    //获取商户财务报表数据
    loadShopList() {
      var param = {
        page: this.page,
        pageSize: this.pageSize,
        shopName:this.merchantName,
        shopCode:this.merchantNo,
        chargePersonName:this.leader,
        contractState:this.searchvalue1
      };

      this.axios({
        url: "/shop/getAll",
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
          this.arr = res.data.data.list;
          this.total=res.data.data.total
      });
    },
  }
};
</script>

<style scoped>
/* 搜索 */
.merchantManagement-header {
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
}
/* 搜索input框 */
.search-inp {
  display: flex;
  flex-wrap: wrap;
}
.search-inp .item {
  margin-top: 10px;;
  width: 330px;
  margin-bottom: 10px;
}
.search-inp .item-text {
  width: 100px;
  text-align: right;
  display: inline-block;
  margin-right: 10px;
}
/* 搜索按钮 */
.search-btn {
  width: 460px;
  margin-left: 27px;
}
.search-btn span {
  margin-left: 8px;
  margin-bottom: 6px;
}

/* 表格 */
.table-box {
  margin-top: 40px;
}
/* 遮罩层 */
.mask {
  width: 100vw;
  height: 100vh;
  /* color: #555; */
  background: rgba(51, 51, 51, 0.692);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
}
.info{
    padding-left: 50px;
}
.mask .contenta {
  width: 580px;
  height: 300px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30PX;
}

.mask .content-top {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.mask .content-top img {
  width: 25px;
}

.content-items {
  margin: 40px 0 0 15px;
}

.content-items .item {
  margin: 12px 10px;
  display: flex;
  align-items: center;
}

.content-items .item span:first-child {
  display: inline-block;
  width: 150px;
}
.content-bottom{
  margin: 80px 0 0 180px;

}
</style>